<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>同时侦听多个变量</title>
</head>
<body>
<div id="app">
    <H1>姓：{{ familyName }}</H1>
    <H1>名：{{ givenName }}</H1>

    <h1>姓名：{{ fullName }}</h1>
</div>

<script type="module">
    import {createApp, ref, computed, watch} from "../../../js/vue.esm-browser.js";

    let app = createApp(
        {
            setup() {
                let familyName = ref("kevin")
                let givenName = ref("abcque")

                let fullName = computed(
                    {
                        get: function (test) {
                            console.log("调用了 fullName 计算属性");
                            return familyName.value + " " + givenName.value
                        },
                        set: function (name) {
                            let split = name.split(" ");
                            familyName.value = split[0]
                            givenName.value = split[1]
                        }
                    }
                )

                // 同时查侦听多个变量，得到更新后的值
                /*watch([familyName, givenName], (value) =>{
                    // 回调函数为一个参数的时候，结果为 watch 函数第一个参数对应的更新后的值
                    console.log(value);
                })*/


                watch([familyName, givenName], (newValue, oldValue) => {
                    // 回调函数为两个参数的时候，第一个参数为更新后的变量对应的值，第二个参数为更新之前变量对应的值
                    console.log(newValue);
                    console.log(oldValue);
                })


                return {
                    familyName, givenName, fullName

                }
            }
        }
    );

    app.mount("#app")
</script>
</body>
</html>